<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用JSX语法</title>
    <script src="./node_modules/@babel/standalone/babel.min.js"></script>
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <div id="root"></div>
    <!-- type一定要写 -->
    <script type="text/babel">
        // 声名
        let count = 100
        let a = 20
        let msg = "你好React"
        let arr = [1,2,3]
        let obj = {
            name:'张三',
            age:'19'
        }
        let isShow = true
        let other = null
        let other1 = undefined

        let ps = <p>
                这是一个用JSX语法写的段落，<span class="red">红色</span>
            </p>
        let item=<>
            <div className="item">
                <h2 className="title">日历</h2>
                <p>总数：{count}</p>
                <input type="text" placeholder="请输入内容" />
                <hr/>
                <br/>
            </div>
            <h2>表达式</h2>
            // 讲上面的声名依次放入我们的li中
            <ul>
                <li>A:{a}</li>   
                <li>a+count :{a+count}</li>
                <li>msg:{msg}</li> 
                <li>arr-map: {arr.map(item => item+2)}</li>
                <li>obj：{obj.name}-{obj.age}</li>
                <li>jsx本身是一个表达式: {ps}</li>
                <li>isShow: {isShow ? '显示': '隐藏'}</li>
                <li>null: {other}</li>
                <li>undefined: {other1}</li>
            </ul>
            <h2>语句2</h2>
            <p>
                {
                    "11111"
                }
                <br/>
                {
                    "22222"
                }
                <br/>
                {
                    "33333"
                }
            </p>
        </>
        //创建跟节点
        let root = ReactDOM.createRoot(document.getElementById('root'))
        //5.把虚dom渲染到页面中
        root.render(item)
        console.log('vdom',item)
        console.log('tdom',document.getElementById('root'))
    </script>
</head>
<body>
    
</body>
</html>